<template>
  <div class="main">
    <div class="searchBox clearfix">
      <div class="searchContent">
        <el-input
          placeholder="企业名称"
          v-model="param.enterpriseName"
          clearable
        >
        </el-input>

        <el-select
          v-model="param.enterpriseType"
          style="width: 120px"
          clearable
          placeholder="企业类型"
        >
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input
          placeholder="法人姓名"
          v-model="param.legalPersonName"
          clearable
        >
        </el-input>
        <el-input
          placeholder="管理员账号"
          v-model="param.managerPhoneNumber"
          clearable
        >
        </el-input>
        <el-button @click="tableList">查找</el-button>
      </div>
    </div>
    <div class="declare">
      <el-table
        ref="multipleTable"
        :data="list.rows"
        tooltip-effect="dark"
        style="width: 100%"
        border
      >
        <el-table-column type="expand" width="50px">
          <template slot-scope="props">
            <el-table
              :data="props.row.hotelInfoDTOList"
              border
              style="width: 100%"
            >
              <el-table-column prop="hotelName" label="门店名称">
              </el-table-column>
              <el-table-column prop="name" label="省市区">
                <template slot-scope="scope">
                  <span>
                    {{ scope.row.provinceName }}
                    {{ scope.row.cityName }}
                    {{ scope.row.areaName }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column prop="hotelAddress" label="详细地址">
              </el-table-column>
              <el-table-column prop="serverPhone" label="前台电话">
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="法人">
          <template slot-scope="scope">{{
            scope.row.enterpriseInfoDTO
              ? scope.row.enterpriseInfoDTO.legalPersonName
              : ""
          }}</template>
        </el-table-column>
        <el-table-column label="管理员账号" width="200">
          <template slot-scope="scope">{{
            scope.row.enterpriseInfoDTO
              ? scope.row.enterpriseInfoDTO.managerPhoneNumber
              : ""
          }}</template>
        </el-table-column>
        <el-table-column label="证件号">
          <template slot-scope="scope">{{
            scope.row.enterpriseInfoDTO
              ? scope.row.enterpriseInfoDTO.idCard
              : ""
          }}</template>
        </el-table-column>
        <el-table-column label="企业名称">
          <template slot-scope="scope">{{
            scope.row.enterpriseInfoDTO
              ? scope.row.enterpriseInfoDTO.enterpriseName
              : ""
          }}</template>
        </el-table-column>
        <el-table-column label="企业类型">
          <template slot-scope="scope">
            <span v-if="scope.row.enterpriseInfoDTO">
              <span v-if="scope.row.enterpriseInfoDTO.enterpriseType == 1"
                >个人</span
              >
              <span v-if="scope.row.enterpriseInfoDTO.enterpriseType == 2"
                >企业</span
              >
            </span>
          </template>
        </el-table-column>
        <el-table-column label="省市区">
          <template slot-scope="scope">
            <span v-if="scope.row.enterpriseInfoDTO">
              {{ scope.row.enterpriseInfoDTO.provinceName }}
              {{ scope.row.enterpriseInfoDTO.cityName }}
              {{ scope.row.enterpriseInfoDTO.areaName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="详细地址">
          <template slot-scope="scope">
            <span>{{
              scope.row.enterpriseInfoDTO
                ? scope.row.enterpriseInfoDTO.enterpriseDetailLocal
                : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <span>{{
              scope.row.enterpriseInfoDTO
                ? scope.row.enterpriseInfoDTO.createTime
                : ""
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        @size-change="changeNum"
        @current-change="changePage"
        :current-page="param.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="param.pageSize"
        layout="total, prev, pager, next,sizes"
        :total="list.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "leasingInfo",
  data() {
    return {
      idNum: "",
      url: "/independentDeclaration/page",
      param: {
        enterpriseName: null,
        enterpriseType: null,
        status: null,
        legalPersonName: "",
        managerPhoneNumber: "",
        pageNum: 1,
        pageSize: 10,
      },
      statusList: [
        {
          name: "个体",
          value: 1,
        },
        {
          name: "企业",
          value: 2,
        },
      ],
    };
  },
  methods: {
    changeNum(val) {
      this.param.pageNum = 1;
      this.param.pageSize = val;
      this.$store.dispatch("getlist", { param: this.param, url: this.url });
    },
    changePage(val) {
      this.param.pageNum = val;
      this.$store.dispatch("getlist", { param: this.param, url: this.url });
    },
    tableList() {
      this.$store.dispatch("getlist", { param: this.param, url: this.url });
    },
  },
  mounted() {
    this.$store.dispatch("getlist", { param: this.param, url: this.url });
  },
  computed: {
    ...mapState(["list"]),
  },
};
</script>
<style >
.declare .el-table th {
  background-color: #e5e5e5 !important;
}
</style>
